/**
 * 专家建议管理页面
 * @author Zeon scplay@gmail.com
 * @date 2019/3/20
 * @copyright Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less">
.v-customer-expert—suggest-views {
  padding: 20px;
}
</style>
<template>
  <div class="v-customer-expert—suggest-views">
    <Tabs type="card" @on-click="changeTab">
      <TabPane
        :tag_name="tag_name"
        :label="$t('expert_suggest.tab_wax')"
        :name="$t('expert_suggest.tab_wax')"
      >
        <edit-wax
          v-if="wax_skin_data.length"
          :wax-skin-data="wax_skin_data"
          @post-wax="storeWaxSkinData"
          @del-wax="resetWaxSkinData"
          ref="edit-wax"
        />
      </TabPane>

      <TabPane
        :tag_name="tag_name"
        :label="$t('expert_suggest.tab_hm')"
        :name="$t('expert_suggest.tab_hm')"
      >
        <edit-hm
          v-if="hm_skin_data.length"
          ref="edit-hm"
          :hm-skin-data="hm_skin_data"
          @post-hm="storeHmSkinData"
          @del-hm="resetHmSkinData"
        />
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import API_LIST from "src/API_LIST";
import editWax from "./edit-wax";
import editHm from "./edit-hm";

import { mapMutations, mapGetters } from "vuex";

import qs from "qs";

import { computedFormMaxHeight } from "src/views/mixins/computedFormMaxHeight";

import { deleteEmptyValue } from "src/utils/utils";

export default {
  name: "ExpertSuggest",
  components: {
    editWax,
    editHm
  },
  mixins: [computedFormMaxHeight],
  data() {
    return {
      tag_name: this.$t("expert_suggest.tab_wax"),
      wax_skin_data: [],
      hm_skin_data: [],
      customer_id: ""
    };
  },
  computed: {
    ...mapGetters("userToken", ["getToken", "getUserInfo"])
  },
  watch: {},
  mounted() {
    this.customer_id = this.getUserInfo.customer_id;
    this.fetchWaxSuggests();
    this.fetchHmSuggests();
  },
  methods: {
    ...mapMutations("report", ["setUserInfos"]),

    ...mapMutations("spinShow", ["showSpin", "closeSpin"]),

    changeTab(tag) {
      this.tag_name = tag;
    },

    /**
     * 获取 3D测肤 专家建议 数据
     * 
     */ 
    fetchWaxSuggests() {
      this.showSpin();
      this.wax_skin_data = [];
      this.$http
        .get(API_LIST.CUST_SKIN_SUGGEST_WAX)
        .then(({ data }) => {
          if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

          data.wax_skin_suggests.forEach(locale_suggest => {
            locale_suggest.current_item_idx = 0;
          });

          this.wax_skin_data = data.wax_skin_suggests;
        })

        .catch(err => {
          this.$Message.error(err.message || err.statusText);
        })

        .then(this.closeSpin);
    },

    storeWaxSkinData(form_data) {
      this.showSpin(this.$t("common.please_wait"));

      this.$http
        .post(API_LIST.CUST_SKIN_SUGGEST_WAX, form_data)
        .then(({ data }) => {
          if (Number(data.code) !== 0) throw new Error(data.error);
          this.$Message.success(this.$t("common.update_success"));
        })
        .catch(err => {
          this.$Message.error(err.message);
        })
        .then(this.closeSpin);
    },

    fetchHmSuggests() {
      this.showSpin();
      this.hm_skin_data = [];
      this.$http
        .get(API_LIST.CUST_SKIN_SUGGEST_HM)
        .then(({ data }) => {
          if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

          this.hm_skin_data = data.hm_skin_suggests;
        })

        .catch(err => {
          this.$Message.error(err.message || err.statusText);
        })

        .then(this.closeSpin);
    },

    storeHmSkinData(form_data) {
      this.showSpin(this.$t("common.please_wait"));

      this.$http
        .post(API_LIST.CUST_SKIN_SUGGEST_HM, form_data)
        .then(({ data }) => {
          if (Number(data.code) !== 0) throw new Error(data.error);

          this.$Message.success(this.$t("common.update_success"));
        })
        .catch(err => {
          this.$Message.error(err.message);
        })
        .then(this.closeSpin);
    },

    // hm重置
    resetHmSkinData() {
      this.$Modal.confirm({
        title: this.$t("product.tip"), // '温馨提示',
        content: this.$t("product.is_reset"), // '删除之后将无法恢复，确定吗？',
        onOk: () => {
          this.showSpin(this.$t("common.please_wait"));
          // debugger;
          this.$http
            .delete(`${API_LIST.CUST_SKIN_SUGGEST_HM}/${this.customer_id}`)
            .then(({ data }) => {
              this.fetchHmSuggests();
              this.$Message.success(this.$t("common.recover_success"));
            })
            .catch(err => {
              this.$Message.error(err.message || err.statusText);
            })
            .then(this.closeSpin);
        },
        onCancel: () => {}
      });
    },
    //wax 重置
    resetWaxSkinData() {
      this.$Modal.confirm({
        title: this.$t("product.tip"), // '温馨提示',
        content: this.$t("product.is_reset"), // '删除之后将无法恢复，确定吗？',
        onOk: () => {
          this.showSpin(this.$t("common.please_wait"));
          // debugger;
          this.$http
            .delete(`${API_LIST.CUST_SKIN_SUGGEST_WAX}/${this.customer_id}`)
            .then(({ data }) => {
              this.fetchWaxSuggests();
              this.$Message.success(this.$t("common.recover_success"));
            })
            .catch(err => {
              this.$Message.error(err.message || err.statusText);
            })
            .then(this.closeSpin);
        },
        onCancel: () => {}
      });
    }
  }
};
</script>
